<template>
	<div>
		<el-container>
			
			<div style="height: 90px;" class="main-content-bg-color"></div>
			<el-header height="90px" class="z-15 d-flex flex-column position-fixed bg-dark left-0 right-0 top-0"  
			
			:class="(scrollLength<navBarBegin && scrollLength>navBarStop)?'topYNityFirst':'navBarScrollBottom'" 
			>
				<div class="d-flex a-center ">
					<img
						src=""
						width="97px"
						height="24px"
						class="ml-3"
					/>
					
					<div class="ml-auto d-flex " >
						<div class="a-center d-flex position-relative" style="line-height: 50px;" :class="isLonger ? 'inputLonger' : 'inputOriginal'">
							<input type="text" class="searchInput w-100" placeholder="请输入要搜索的内容" @blur="blur" @focus="focus" v-model="localKeyword" @input="inputChange"/>
							<i :class="localKeyword?'el-icon-close':'el-icon-search' " class="i_input_icon"  @click.stop="handleIconClick"></i>
							
							<div v-if="searchList.length>0">
								<div class="scroll_bar" >
									
									  <div class="p-1" style="height:100%;" >
										  <div v-for="(item,index) in searchList" :key="index" style="line-height: 25px;font-size: 12px;cursor: pointer;" @click="chooseItem(item,index)" >
										    <div v-html="item.value"></div>
											
										  </div>
									  </div>
									
								</div>
								<div class="popper__arrow" >
									
								</div>
							</div>
						</div>
						
						<div style="line-height: 50px;" class="mx-5">
							
								<el-button type="text" class="text-white" v-if="!username">登录</el-button>
								<el-button type="text" class="text-white" v-else>{{username}}</el-button>
								<span class="text-white" style="padding-left: 5px;padding-right: 5px;">/</span>
								<el-button type="text" class="text-white" @click="loginOut">{{username?'退出':'注册'}}</el-button>
							
							
						</div>
					</div>
				</div>
				
				<div class="d-flex">
					<div style="height: 40px;" class="d-flex main-bg-color a-center w-100">
						<div v-for="(item,index) in tabBar" id="tabBar" class="position-relative h-100 d-flex a-center hoverItem"  style="cursor: pointer;" :key="index" @click="changeRoute(item,index)"  :class="[index===0?'ml-2':'']">
							<span class="px-2 py-1" >
								{{item.name}}
							</span>
							<span :class="[index===activeIndex?'active':'notActiveBar']" :id="item.path"></span>
						</div>
						
					</div>
				</div>
				
			</el-header>
			
			<el-main style="z-index: 10;" class="p-0">
				
				
				<template v-if="!this.localKeyword">
					
					<router-view></router-view>
				</template>
				
				<template v-else>
					<card 
					:data="searchList"
					:showTitle="false"
					:isLastuse="true"
					></card>
				</template>
			</el-main>
			
			
					<div @click="scrollUp" v-if="this.scrollLength>400" style="cursor: pointer;height: 40px;width: 40px;bottom: 100px;right: 60px;z-index: 2000;" class="position-fixed">
						<div
						  style="
						    height: 100%;
						    width: 100%;
						    background-color: #c7c6cf;
						    box-shadow: 0 0 6px rgba(0,0,0, .12);
						    text-align: center;
						    line-height: 40px;
						    color: #1989fa;
						  "
						>
						  <i class="el-icon-arrow-up text-white " style="font-size: 14px;line-height: inherit;"></i>
						</div>
					</div>
				
			
		</el-container>
		
	</div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import $util from '@/common/sort.js'
import card from '@/components/card/card.vue'
let storage = window.sessionStorage
let dataHeight = storage.getItem('dataHeight')?JSON.parse(storage.getItem('dataHeight')):[]
export default {
	
	components:{
		card
	},
	computed:{
		...mapState([
			'lastuse',
			'management',
			'MacroLocation',
			'anemometry',
			'mapDeal',
			'modeTrue',
			'effImp',
			'latterEnva',
			'postEva',
			'dataService',
			'qr_code1',
			'qr_code2',
			'searchList',
			'keyword',
			
			])
	},
	
	data() {
		return {
			localKeyword:'',
			username:'',
	
			navBarBegin:450,
			navBarStop:100,
			isNavbarFixed:false,
			isRouteChange:'',
			scrollLength:0,
			activeName: 'second',
			isLonger: false,
			clearable: false,
		
			restaurants:'',
			activeIndex:1,
			tabBar:[
				{name:'最近使用',path:'lastuse'},
				{name:'管理工具',path:'management'},
				{name:'宏观选址',path:'MacroLocation'},
				{name:'测风',path:'anemometry'},
				{name:'地图处理',path:'mapDeal'},
				{name:'仿真',path:'modeTrue'},
				{name:'后处理',path:'effImp'},
				{name:'后评估',path:'latterEnva'},
				{name:'效率提升工具',path:'postEva'},
				{name:'数据服务',path:'dataService'},
				{name:'APP市场',path:'qr_code1'},
			]
		};
	},
	watch:{
		$route(to,from){
			
			
			if(this.lastuse.length===0){
				this.activeIndex = parseInt(storage.getItem('activeIndex'))
			}
		}
	},
	mounted() {
		
		this.changeSerachList([])
		 let index=1
		  storage.setItem('activeIndex',index)
	      this.restaurants = this.loadAll();
		  // 事件监听滚动条
		  window.addEventListener('scroll', this.watchScroll, true)
		  
		  
		  
		  this.$nextTick(() => {
		
			let user = storage.getItem('user')
				
				if(user){
				  user = JSON.parse(user)
				  this.username = user.username
						  
				}
			
			
		  }
		  
		  )
		  
	    },
	destroyed () {
	      window.removeEventListener('scroll', this.watchScroll)
	    },
	methods: {
		
		...mapMutations(['changeSerachList','sortSearchList','clearKeyword','setKeyword']),
		loginOut(){
			storage.clear()
			window.location.href = 'http://180.76.96.39:90/?url=' + window.location.href
		},
		
		scrollUp(){
			
			this.calculateLength(100,1,0,'up')
		},
		up(offset,top,addHeight,interval){
			
			addHeight = 110
		
			let betweenDestance = document.documentElement.scrollTop-offset
			//当已经滚到顶点了则清除定时器
			if(document.documentElement.scrollTop===0){
				return window.clearInterval(interval)
			}
			//如果滚动距离与offset只差小于高度，即不够减，直接滚动到具体高度,滚到顶点-20>-addHeight,造成循环
			if(betweenDestance< top-addHeight || betweenDestance== top-addHeight){
				document.documentElement.scrollTop = top-addHeight
				//向上按钮清除定时器
				return window.clearInterval(interval)
				
			}
			document.documentElement.scrollTop -=offset
		},
		down(offset,top,addHeight,interval){
			if((document.documentElement.scrollTop+offset)>top-addHeight || (document.documentElement.scrollTop+offset)===top-addHeight){
				document.documentElement.scrollTop = top-addHeight
				window.clearInterval(interval)
			}else{
				document.documentElement.scrollTop +=offset
				if(Math.ceil(document.documentElement.scrollTop)===this.scrollLength){
					window.clearInterval(interval)
				}
				
		}
		},
		calculateLength(offset,time,top,type,addHeight){
			
			let interval = window.setInterval(()=>{
				
				if(type==='up'){
					this.up(offset,top,addHeight,interval)
					
				}else{
					addHeight = 110
					 //如果滚动条的滚动距离大于元素的位置，则执行向上滚，否则清除定时器
					if(document.documentElement.scrollTop>top-addHeight){
						
						this.up(offset,top,addHeight,interval)
					}else{
						this.down(offset,top,addHeight,interval)
					}
						
			}
	
			},time)
		},
		watchScroll () {
			
			setTimeout(()=>{
				
				this.scrollLength = document.documentElement.scrollTop
				
				if(this.scrollLength){
					this.scrollLength = Math.ceil(this.scrollLength)
				}
				let items = dataHeight.filter(v=>{
					return this.scrollLength>v.offset-115
				})
				if(items.length===0){
					items.length=1
				}
				
	// 			if(this.activeIndex!=items.length){
					
	// 				let nowH = dataHeight[this.activeIndex-1].offset
	// 				let laterH = dataHeight[items.length-1].offset
					
	// 				if(nowH-laterH>0){
	// 					this.goUp(items)
	// 				}
	
	// 				if(nowH-laterH<0){
	// 					this.goDown()
	// 				}
				
	// 			}
		
				this.activeIndex = items.length
				
				this.isNavbarFixed=this.scrollLength<this.navBarBegin?false:true
			},200)
		 },
	 //    goUp(items){
		//    $("span[class='active']")[0].style.left=0
		//    $("span[class='notActiveBar']").each(function (i,o){
		//    	 o.style.left='100%'
		   	
		//    });
		//    $('#'+dataHeight[items.length-1].dataName)[0].style.left=0
	 //    },
		// goDown(){

		// 	$("span[class='active']")[0].style.left='100%'
			
		// 	$("span[class='notActiveBar']").each(function (i,o){
		// 		 o.style.left=0
			
		// 	});
		// },
		changeRoute(item,index){
		
			 $('#'+item.path)[0].style.left=0
			 setTimeout(()=>{
			 	storage.setItem('activeIndex',index)
			 	
			 	let dataHeight = storage.getItem('dataHeight')?JSON.parse(storage.getItem('dataHeight')):[]
			 	let chooseItem = dataHeight.filter(v=>v.dataName===item.path)
			 	
			 	if(chooseItem.length>0){
			 		
			 		let scrollDestance = chooseItem[0].offset
			
					 let h = 110
				
			 		this.calculateLength(20,1,scrollDestance,'down',h)
					
			 	}
			 },100)
			 
			 
			if(this.activeIndex===index) return
			//切换tab
			this.activeIndex=index
			
			if(item.path==='lastuse'){
				this.goToLastuse()
				
			}else{
				// 捕获 router.push 异常
				this.$router.push({
					name:'index_list'
				}).catch(err => {
				    return
				})
			}
			 
			
		},
		goToIndex(){
			this.$router.push({
				name:'index_list'
			})
		},
		goToLastuse(){
			this.$router.push({
				name:'lastuse'
			})
		},
		handleClick(tab, event) {
		        
		      },
			  
		chooseItem(item,index){
			console.log(item)
			
			this.setKeyword(item.name)
			this.localKeyword = item.name
			this.inputChange()
			
		},
		
		inputChange() {
			this.setKeyword(this.localKeyword)
			this.changeSerachList([])
			this.restaurants = this.loadAll()
			let searchList= this.restaurants.filter(item=>{
				
				let itemList =item.name.split('')
				let index =0
				itemList = itemList.map(v=>{
					
					let keywordIndex = this.localKeyword.indexOf(v)
						if(keywordIndex!=-1){
							index++
							v='<span style="color:red;">'+v+'</span>'
						}
						 return v
					})
					
					item.index = index
					item.value=itemList.join('')
					return item
				
			})
			this.changeSerachList(searchList)
			let orderList = []
			this.sortSearchList()
			
		},
		focus() {
			this.isLonger=true
		},

		blur() {
			console.log(this.keyword)
			if(this.keyword===''){
				this.isLonger=false
				this.changeSerachList([])
			}
			
		},
		handleIconClick(){
			this.clearKeyword()
			this.localKeyword = ''
			this.changeSerachList([])
			this.isLonger=false
		},
		loadAll() {
		        return [
		          ...this.management,
			...this.MacroLocation,
			...this.anemometry,
			...this.mapDeal,
			...this.modeTrue,
			...this.effImp,
			...this.latterEnva,
			...this.postEva,
			...this.dataService,
			...this.qr_code1,
			...this.qr_code2,
		        ]
		      },
	}
};
</script>

<style>


.topYNityFirst{
	opacity:0!important;
	transition: all 0.8s;
	/* transform: translateY(-90px); */
	/* z-index: 1!important; */
}

.navBarScrollBottom{
	opacity:1!important;
	transition: all 0.8s;
	/* transform: translateY(0px); */
	/* z-index: 15!important; */
}





input::-webkit-input-placeholder {
         /* placeholder颜色  */
        color: #28c3c5;
		opacity: 0.8;
        /* placeholder字体大小  */
        font-size: 14px;
         /* placeholder位置  */
         text-align: left;
     }



.inputLonger{
	width: 400px!important;
	transition: width 0.3s;
}
.inputOriginal{
	width: 180px!important;
	transition: width 0.3s;
}

.i_input_icon{
	color: #28c3c5;position: absolute;right: 5px;cursor: pointer;font-size: 12px;
}

/* .active{
	color: #28c3c5;
	border-bottom: 2px solid #28c3c5;
	
} */


.hoverItem::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 100%;
	height: 2px;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #28c3c5;
	transition:all 0.3s ease-in-out;
}

.hoverItem:hover::after{
	
	left: 0;
	width: 100%;
	
	transition:all 0.3s ease-in-out;
}

.hoverItem:hover ~ .hoverItem::after {
    left: 0;
}

.hoverItem:hover{
    color: #28c3c5;
}

.active{
	width: 100%;
	left: 0;
	height: 2px;
	position: absolute;
	bottom: -2px;
	background-color: #28c3c5;
	/* transition: all 0.5s ease-in-out; */
}

.notActiveBar{
	height: 2px;
	position: absolute;
	bottom: -2px;
	background-color: #28c3c5;
	left: 0;
	width: 0;
	/* transition: all 0.5s ease-in-out; */
}


.scroll_bar{
	z-index: 50;
	overflow-y: scroll;
	max-height: 200px;
	width: 100%;
	position: absolute;
	top:53px; 
	left: 0;
	right: 0;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	border-radius: 4px;
	border: 1px solid #e4e7ed;
	box-sizing: border-box;
	background-color: #FFFFFF;
}

.popper__arrow{
	
	transform: rotate(45deg);
	width: 10px;
	height: 10px;
	left: 35px;
	position: absolute;
	bottom: -10px;
	display: block;
	background-color: #FFFFFF;

}



.searchInput {
	outline: none;
	padding-left: 12px;
	padding-right: 12px;
	border:1px solid #28c3c5;
	border-radius: 14px;
	height:25px;
	font-size: 12px;
	line-height:50px;
	opacity: .8;
	background-color: #000000;
	color: #28c3c5;
}
</style>
